import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaNewScroll, WeaDialog, WeaTab } from 'ecCom';
import { WeaTableNew } from 'comsMobx';
import { Button, Modal } from 'antd';
import ViewRegularMemberInfo from './ViewRegularMemberInfo';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;
const confirm = Modal.confirm;

@inject('smsRegularStore')
@inject('sendSmsStore')
@observer
class ViewRegularMemberList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			selectedRowKeys: '',
			searchKey: '',
		};
	}
	componentDidMount() {

	}
	componentWillReceiveProps(nextProps) {
		const { smsRegularStore } = nextProps;
		this.setState({ visible: nextProps.visible });
	}

	saveSmsRegularMemberInfo = (params) => {
		const { smsRegularStore } = this.props;
		const { regularSmsId } = smsRegularStore;
		smsRegularStore.saveSmsRegularMemberInfo(params).then((rdata) => {
			this.doCloseMemberInfo();
			this.getSmsRegularMemberList();
			smsRegularStore.doSearch();
		});
	}

	getSmsRegularMemberList = () => {
		const { smsRegularStore } = this.props;
		const { regularSmsId } = smsRegularStore;
		const { searchKey } = this.state;
		smsRegularStore.getSmsRegularMemberList({ regularId: regularSmsId, searchKey });
	}


	deleteSmsRegularMemberInfo = () => {
		const { smsRegularStore } = this.props;
		const { regularTableStore } = smsRegularStore;
		const selectedRowKeys = regularTableStore.selectedRowKeys.join();
		this.doDelete(selectedRowKeys);
	}

	doDelete = (ids) => {
		const { smsRegularStore } = this.props;
		const { regularSmsId } = smsRegularStore;
		const _this = this;
		confirm({
			title: getLabel(131329, '信息确认'),
			content: getLabel(15097, '确定要删除吗？'),
			onOk() {
				smsRegularStore.deleteSmsRegularMemberInfo({ ids }).then((rdata) => {
					_this.doCloseMemberInfo();
					smsRegularStore.getSmsRegularMemberList({ regularId: regularSmsId });
					smsRegularStore.doSearch();
				});
			},
			onCancel() {

			},
		});
	}

	render() {
		const { smsRegularStore } = this.props;
		const { regularTableStore, regularDataKey, regularMemberInfoVisible } = smsRegularStore;
		const { selectedRowKeys } = this.state;
		const collectParams = {
			favname: `${getLabel('519176', '短信接收人')}`,
			objid: 0,
			link: 'wui/index.html#/main/sms/smsRegular',
			importantlevel: 1,
		};
		const iconStyle = {
			display: 'inline-block',
			color: '#58A0F8',
			fontSize: '16px',
			paddingRight: '8px',
			cursor: 'pointer',
		};
		return (<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dnvwqb`}
  visible={this.state.visible}
  title={getLabel(519176, '短信接收人')}
  icon="icon-coms-message"
  iconBgcolor="#0079de"
  className="createWorkPlan"
  buttons={[]}
  moreBtn={{
				collectParams,
			}}
  style={{ width: 900, height: 500 }}
  onCancel={this.doClose}
		>
			<div className="viewRegularMemberContent" style={{ height: '100%' }} >
				<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@118sei`}
  searchType={['base']}
  onSearch={(v) => { this.getSmsRegularMemberList(); }}
  onSearchChange={(v) => { this.setState({ searchKey: v }); }}
  buttons={[
						<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@08hfol@WeaDialog_deleteBtn`}
  style={{ display: 'inline-block' }}
  className="minus"
  type="primary"
  title={getLabel(91, '删除')}
  disabled={regularTableStore.selectedRowKeys.length === 0}
  size="small"
  onClick={() => {
								this.deleteSmsRegularMemberInfo();
							}}
						>
							<span className="icon-coms-form-delete-hot" /></Button>,
					]}
				/>
				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@nmcp3z`} height={'450px'}>
					<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@r6gebe`}
  sessionkey={regularDataKey}
  hasOrder={true}
  needScroll={true}
  outerHeight={'453'}
  onOperatesClick={this.onOperatesClick}
  comsWeaTableStore={regularTableStore}
  getColumns={this.getNewColumns}
					/>
				</WeaNewScroll>

				<ViewRegularMemberInfo ecId={`${this && this.props && this.props.ecId || ''}_ViewRegularMemberInfo@xkj7nj`}
  visible={regularMemberInfoVisible}
  doClose={() => {
						this.doCloseMemberInfo();
					}}
  doDelete={(id) => {
						this.doDelete(id);
					}}
  onSave={(params) => {
						this.saveSmsRegularMemberInfo(params);
					}}
				/>
			</div>
		</WeaDialog>
		);
	}

	onOperatesClick = (record, index, operate, flag, argumentString) => {
		let smsRegularStore = this.props.smsRegularStore;
		let operateType = operate.index;
		const id = record.id;
		const receiverType = record.receiverType;
		if (operateType == 0) { // 编辑
			this.viewRegularMemberInfo(id);
		} else if (operateType == 1) { // 立即发送 继续发送
			this.doDelete(id);
		}
	}

	viewRegularMemberInfo = (id) => {
		const { sendSmsStore, smsRegularStore } = this.props;
		smsRegularStore.setRegularMemberId(id);
		sendSmsStore.getBaseData({ id, from: 'regularMember' }, () => {
			smsRegularStore.openRegularMemberInfo();
		});
		sendSmsStore.getOptions();
	}

	getNewColumns = (columns) => {
		let newColumns = '';
		newColumns = columns.map((column) => {
			let newColumn = column;
			// 表格的标题列的前端元素改造
			if (newColumn.dataIndex === 'receiverNumber') {
				newColumn.render = (text, record, index) => {
					let valueSpan = record[`${newColumn.dataIndex}span`] !== undefined ? record[`${newColumn.dataIndex}span`] : record[newColumn.dataIndex];
					return (
						<div className="wea-url-name" style={{ cursor: 'pointer' }} onClick={() => { this.viewRegularMemberInfo(record.id); }} dangerouslySetInnerHTML={{ __html: valueSpan }} />
					);
				};
			}

			return newColumn;
		});
		return columns;
	}

	doClose = () => {
		this.props.doClose && this.props.doClose();
	}

	doCloseMemberInfo = () => {
		const { smsRegularStore } = this.props;
		smsRegularStore.closeRegularMemberInfo();
	}
}

export default ViewRegularMemberList;
